<template>
  <view class="listBox">
    <view class="title">
      <view class="let">服务项目</view>
      <view
        class="rig"
        @click="$utils.toUrl(`/service-home/evaluate/index?id=${data.id}`)"
      >
        <view class="s1">好评度{{ data.proportion }}%</view>
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>

    <view class="list">
      <view class="item" v-for="(item, i) of data.goods_list" :key="i">
        <view class="img">
          <image mode="aspectFill" :src="item.cover_pic" lazy-load></image>
        </view>

        <view class="con">
          <view class="name"> {{ item.name }} </view>

          <view class="des">{{
            item.desc && item.desc.length ? item.desc.join(" · ") : ""
          }}</view>

          <view class="conFd">
            <view class="let">
              <view class="price">
                <view class="s1">{{ getPrice(item.price)[0] }}</view>
                <view>.{{ getPrice(item.price)[1] }}</view>
              </view>

              <view class="oldPrice">¥{{ item.original_price }}</view>
            </view>

            <view class="rig">
              <numberStep
                v-if="item.num"
                :value="item.num"
                :min="0"
                @input="(e) => Emit.$emit('handle', 'changeNum', { num: e, i })"
              ></numberStep>
              <view
                class="add"
                v-else
                @click="Emit.$emit('handle', 'changeNum', { num: 1, i })"
              >
                <i class="iconfont icon-add-select"></i>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import numberStep from "./page-numberStep";

export default {
  components: {
    numberStep,
  },
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  computed: {
    getPrice() {
      return (price) => {
        if (price) return price.split(".");
        return ["0", "00"];
      };
    },
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.list {
  padding: 0 24rpx 24rpx;

  .item {
    display: flex;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
  }

  .img {
    position: relative;
    margin-right: 20rpx;
    width: 180rpx;
    height: 180rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      background: #000;
    }
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .con {
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .name {
    overflow: hidden;
    flex: 1;
    font-size: 30rpx;
    font-weight: bold;
    color: #262626;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .des {
    padding: 6rpx 0 14rpx;
    font-size: 24rpx;
  }

  .conFd {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .let {
      flex: 1;
      overflow: hidden;
      display: flex;
      align-items: flex-end;

      .price {
        display: flex;
        align-items: flex-end;
        margin-right: 10rpx;
        color: #f0250e;
        font-size: 24rpx;

        &:before {
          content: "¥";
        }

        .s1 {
          font-size: 36rpx;
          line-height: 1.1;
          font-weight: bold;
        }
      }
    }
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  height: 102rpx;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);

  .let {
    font-size: 30rpx;
    font-weight: bold;
  }

  .rig {
    display: flex;
    align-items: center;

    .s1 {
      color: #f0250e;
      font-size: 24rpx;
    }

    .iconfont {
      color: #000;
      font-size: 24rpx;
    }
  }
}

.oldPrice {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #888;
  }
}

.add {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #262626;
  border: 1px solid #f2f2f2;
  border-radius: 10rpx;
}
</style>
